import doT from 'dot';
import echarts from 'echarts';
// import template from './Popup.html';
import './Popup.css';

export default class Popup {
    constructor(popup, map) {
        this.popup = popup;
        this.map = map;
        const pupupDom = document.createElement('div');
        pupupDom.className = 'popup-box';
        popup.setDOMContent(pupupDom);
        this.echarts = echarts.init(pupupDom);
        this.option = {
            xAxis: {
                boundaryGap: false,
                data: [0, 3, 6, 9, 12, 15, 18, 21, 24, 27, 30, 33, 36, 39, 42, 45, 48],
                axisLine: {
                    lineStyle: {
                        color: '#fff'
                    }
                }
            },
            yAxis: {
                name: '降水量(mm)',
                nameTextStyle: {
                    color: '#fff'
                },
                axisLine: {
                    lineStyle: {
                        color: '#fff'
                    }
                }
            },
            grid: {
                top: 30,
                bottom: 25
            },
            series: [{
                type: 'line',
                data: [0, 3, 6, 9, 12, 15, 18, 21, 24, 27, 30, 33, 36, 39, 42, 45, 48]
            }]
        };
        this.echarts.setOption(this.option);
    }
    setData(data, e) {
        this.option.series[0].data = data;
        setTimeout(() => {
            this.popup.setLngLat(e.lngLat.toArray()).addTo(this.map);
            this.echarts.resize();
            this.echarts.setOption(this.option);
        }, 50);
    }
}